<!--日期类型的查询-->
<template>
  <div style="float:left;width:65px;text-align:center;">
    <find-kind
      v-model="findChoiceKind"
      :findKind="findKind"
      @change="myChange"
    />
  </div>
  <!--范围查询-->
  <template v-if="findChoiceKind === 417">
    <template v-if="dateChoiceKind === '年'">
      <!--年的范围查询-->
      <component
        :is="ctlList[myControlType]"
        v-model="mydate1"
        v-bind="$attrs"
        format="YYYY-MM-DD"
        @myChange="myChange('range1')">
      </component>
      至
      <component
        :is="ctlList[myControlType]"
        v-model="mydate2"
        v-bind="$attrs"
        format="YYYY-MM-DD"
        @myChange="myChange('range2')">
      </component>
    </template>
    <!--日期、年月的范围查询-->
    <el-date-picker v-else
      v-model="mydate"
      :type="rangeType"
      format="YYYY-MM-DD"
      style="width:256px;"
      :unlink-panels="false"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="myChange"
      @input="myChange"
    >
    </el-date-picker>
  </template>
  <!--单条件查询-->
  <template v-else>
    <div style="float:left;" :style="{width: (150 * colCount - 40 ) + 'px'}">
      <component
        :is="ctlList[myControlType]"
        v-model="mydate1"
        v-bind="$attrs"
        @myChange="myChange('text')">
      </component>
    </div>
  </template>&nbsp;
  <!--日期类型-->
  <date-kind
    v-model="dateChoiceKind"
  />
</template>

<script>
import { defineComponent, reactive, ref, watchEffect } from 'vue'
// 引入查询子控件的管理类
// eslint-disable-next-line import/no-absolute-path
import { findItemManage } from '/nf-control-web'
// 查询方式的控件
import selectFindKind from './s-findkind.vue'
// 查询方式的控件
import selectDateKind from './s-datekind.vue'

import dayjs from 'dayjs'

// 异步组件，引入表单子控件
import { formItemToFindItem } from '../nf-el-find-item/map-el-find-item.js'

// eslint-disable-next-line no-undef
// const dateFormat = dayjs // 避免每次使用的时候，都加上面那个注释

/**
 * 等于：
 * 日期 》 一个日期
 * 年 》 年头到年尾
 * 年月 》 月头到月尾
 * 范围：
 * 日期 》 日期
 * 年
 */

export default defineComponent({
  name: 'el-find-item-date',
  props: {
    controlId: Number, // 控件ID
    controlType: Number, // 控件类型
    colName: String, // 字段名称
    modelValue: [Array],
    submitFormat: { // 提交给后端的格式化，使用dayjs实现
      type: String,
      default: () => 'YYYY-MM-DD' // date：取原生date()；timestamp：取时间戳
    },
    findKind: {
      type: Array,
      default: () => [401, 417, 413, 414, 415, 416]
    }
  },
  components: {
    'find-kind': selectFindKind,
    'date-kind': selectDateKind
  },
  emits: ['update:modelValue', 'my-change'],
  setup (props, context) {
    // 表单子控件 to 查询子控件 的 字典
    const ctlList = formItemToFindItem

    const {
      findChoiceKind, // 用户选择的查询方式
      findText, // 一个关键字查询
      findRange, // 范围查询
      mySubmit
    } = findItemManage(props, context)

    const mydate = ref([])
    const mydate1 = ref('')
    const mydate2 = ref('')

    findChoiceKind.value = 417
    // findText.value = [new Date(), new Date()]
    // findText.value = []

    // 日期格式
    const dateChoiceKind = ref('日期')
    // 范围查询类型
    const rangeType = ref('daterange')

    // 控件类型
    const myControlType = ref(props.controlType)

    // 根据日期类型，设置日期控件的type
    watchEffect(() => {
      switch (dateChoiceKind.value) {
        case '日期':
          rangeType.value = 'date' + (findChoiceKind.value === 417 ? 'range' : '')
          myControlType.value = 110
          break
        case '年月':
          rangeType.value = 'month' + (findChoiceKind.value === 417 ? 'range' : '')
          myControlType.value = 112
          break
        case '年':
          rangeType.value = 'year'
          myControlType.value = 114
          break
      }
    })

    // 提交查询结果
    const myChange = () => {
      const _value = mydate1.value
      const _arr = ['', '']

      // 判断查询方式
      switch (findChoiceKind.value) {
        case 401: // =
          if (_value === '') {
            mySubmit(_value) // 清空查询条件
          } else {
            // 判断日期类型。日期返回一个日期，其他返回范围
            switch (dateChoiceKind.value) {
              case '日期':
                mySubmit(_value) // 查询关键字
                break
              case '年月':
                // 返回范围，结束日期 = 第一个日期加一个月 减掉 一毫秒
                _arr[0] = _value + '-01'
                _arr[1] = dayjs(_arr[0]).add(1, 'month').subtract(1, 'millisecond').format(props.submitFormat)
                mySubmit(_arr, 417) // 查询关键字
                break
              case '年':
                // 返回范围，结束日期 = 第一个日期加一年 减掉 一毫秒
                _arr[0] = _value + '-01-01'
                _arr[1] = dayjs(_arr[0]).add(1, 'year').subtract(1, 'millisecond').format(props.submitFormat)
                mySubmit(_arr, 417) // 查询关键字
                break
            }
          }
          break
        case 417: // 从 返回一个范围
          if (mydate.value[0] === '') {
            mySubmit(mydate.value[0]) // 清空查询条件
          } else {
            // 判断日期类型。返回范围
            switch (dateChoiceKind.value) {
              case '日期':
                _arr[0] = dayjs(mydate.value[0]).format(props.submitFormat)
                _arr[1] = dayjs(mydate.value[1]).format(props.submitFormat)
                mySubmit(_arr) // 查询关键字
                break
              case '年月':
                // 返回范围，结束日期 = 第二个日期加一个月 减掉 一毫秒
                mydate.value[1] = dayjs(mydate.value[1])
                  .add(1, 'month')
                  .subtract(1, 'millisecond')
                // 格式化
                _arr[0] = dayjs(mydate.value[0]).format(props.submitFormat)
                _arr[1] = mydate.value[1].format(props.submitFormat)
                mySubmit(_arr) // 查询关键字
                break
              case '年':
                // 返回范围，结束日期 = 第一个日期加一年 减掉 一毫秒
                _arr[0] = mydate1.value + '-01-01'
                _arr[1] = dayjs(mydate2.value + '-01-01')
                  .add(1, 'year')
                  .subtract(1, 'millisecond')
                  .format(props.submitFormat)
                mySubmit(_arr) // 查询关键字
                break
            }
          }
          break
        case 413: // >
        case 416: // <=
          // 判断日期类型。返回一个日期
          if (_value === '') {
            mySubmit(_value) // 清空查询条件
          } else {
            let _val = _value // 默认查询日期
            switch (dateChoiceKind.value) {
              case '年月':
                // 大于，取月末。 + 一个月 - 1 毫秒
                _val = dayjs(_value + '-01').add(1, 'month').subtract(1, 'millisecond').format(props.submitFormat)
                break
              case '年':
                // 大于，取年末。 + 一年 - 1 毫秒
                _val = dayjs(_value + '-01-01').add(1, 'year').subtract(1, 'millisecond').format(props.submitFormat)
                break
            }
            mySubmit(_val) // 提交查询
          }
          break
        case 414: // >=
        case 415: // <
          // 判断日期类型。日期返回一个日期
          if (_value === '') {
            mySubmit(_value) // 查询关键字
          } else {
            let _val = _value // 默认查询日期
            switch (dateChoiceKind.value) {
              case '年月':
                // 大于等于，取月初
                _val = _value + '-01' // 年月改成日期
                break
              case '年':
                // 左面，取一号
                _val = _value + '-01-01' // 年改称日期
                break
            }
            mySubmit(_val) // 提交查询
          }
          break
      }
    }

    return {
      ctlList, // 控件字典，用于加载具体的控件
      dateChoiceKind, // 用户选择的日期类型
      myControlType, // 子控件的类型
      rangeType, // 日期控件的type
      mydate,
      mydate1,
      mydate2,
      findChoiceKind,
      myChange
    }
  }
})
</script>
